<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<html>
	<head>
		<base href="<%=basePath%>">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>注册</title>
		<link rel="icon" href="images/icon.gif" type="image/x-ico">
		<link href="css/style.css" rel='stylesheet' type='text/css'/>
		<link rel="stylesheet" href="css/nav.css">
		<link rel="stylesheet" href="iocnfont/iconfont.css">
		<link rel="stylesheet" href="css/gototop.css">
		<%--<link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>--%>
		<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
		<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css"
			  rel="stylesheet"/>
		<script src="js/nav.js"></script>
		<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
		<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script type="text/javascript"
				src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
		<script>
            $(function () {

                $(".time").datetimepicker({
                    minView: "month",
                    language: 'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });

                //为注册按钮绑定事件
                $("#registerBtn").click(function () {
                    var password = $.trim($("#password").val());
                    var confirmPassword = $.trim($("#confirmPassword").val());

                    if (password !== confirmPassword){
                        $("#msg").html("两次输入的密码不一致");
                        return false;
					}
                    $.ajax({
                        url: "reader/register.do",
                        data: {
                            "name": $.trim($("#name").val()),
                            "username": $.trim($("#username").val()),
                            "password": $.trim($("#password").val()),
                            "phone": $.trim($("#phone").val()),
                            "birth": $.trim($("#birth").val()),
                            "signature": $.trim($("#signature").val()),
                        },
                        type: "post",
                        dataType: "json",
                        success: function (data) {
                            if (data) {
                                alert("注册成功");
                                //并跳转到登录页
                                window.location.href = "login-r.jsp";
                            }else {
								alert("注册失败,请重试");
							}
                        }
                    })


                })

            })
		</script>
	</head>

	<body>
		<header class="ohter-banner">
			<div class="container">
				<div class="header_top ">
					<div class=logo>
						<a href="index.jsp"><img src="images/logo.jpeg" width="150px" height="50px" alt=""></a>
					</div>
				</div>
				<!-- 导航栏 -->
				<div id="nav-1">
					<ul class="nav">
						<li class="slide1"></li>
						<li class="slide2"></li>
						<li><a class="active" href="index.html">网站首页</a></li>
						<li><a href="about.html">书库</a></li>
						<li><a href="#">作者专区</a></li>
						<li><input type="text" placeholder="搜索框"/></li>
						<li><a href="login-r.jsp" class="iconfont icon-denglu" title="登陆"></a></li>
						<li><a href="register.jsp" class="iconfont icon-zhuce" title="注册"></a></li>

					</ul>
				</div>
			</div>
		</header>

		<article class="other-content">
			<div class="container">
				<!-- bootstrap框架的侧边栏样式  -->
				<div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 center">
					<ul class="menu1">
						<li class="item1"><a href="#" class="">奇幻玄幻<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="../sales.jsp">西方奇幻 </a></li>
								<li class="subitem2"><a href="../sales.jsp">东方玄幻</a></li>
								<li class="subitem3"><a href="../sales.jsp">异世大陆 </a></li>
								<li class="subitem3"><a href="../sales.jsp">转世重生 </a></li>
								<li class="subitem3"><a href="../sales.jsp">异术超能 </a></li>
								<li class="subitem3"><a href="../sales.jsp">上古神话</a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">武侠仙侠<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="../sales.jsp">古典仙侠 </a></li>
								<li class="subitem2"><a href="../sales.jsp">现代修真</a></li>
								<li class="subitem3"><a href="../sales.jsp">新派武侠 </a></li>
								<li class="subitem3"><a href="../sales.jsp">传统武侠 </a></li>
								<li class="subitem3"><a href="../sales.jsp">奇幻修真 </a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">历史军事<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="../sales.jsp">穿越历史</a></li>
								<li class="subitem2"><a href="../sales.jsp">架空历史</a></li>
								<li class="subitem3"><a href="../sales.jsp">历史专记 </a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">都市娱乐<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="../sales.jsp">现实题材 </a></li>
								<li class="subitem2"><a href="../sales.jsp">职场商战</a></li>
								<li class="subitem3"><a href="../sales.jsp">江湖情仇 </a></li>
								<li class="subitem3"><a href="../sales.jsp">都市重生 </a></li>
								<li class="subitem3"><a href="../sales.jsp">都市异能 </a></li>
								<li class="subitem3"><a href="../sales.jsp">都市生活</a></li>
								<li class="subitem3"><a href="../sales.jsp">青春校园</a></li>
							</ul>
						</li>
						<li class="item1"><a href="#" class="">悬疑灵异<img class="arrow-img" src="images/arrow.png"
																		alt=""/>
						</a>
							<ul class="cute" style="display: none; overflow: hidden;">
								<li class="subitem1"><a href="../sales.jsp">推理悬念 </a></li>
								<li class="subitem2"><a href="../sales.jsp">恐怖惊悚</a></li>
								<li class="subitem3"><a href="../sales.jsp">灵异神怪 </a></li>
								<li class="subitem3"><a href="../sales.jsp">探险异闻 </a></li>
								<li class="subitem3"><a href="../sales.jsp">神秘文化 </a></li>
							</ul>
						</li>

					</ul>
					<!--手风琴效果的侧边栏效果-->
					<script type="text/javascript">
                        $(function () {
                            var menu1_ul = $('.menu1> li > ul'),
                                menu1_a = $('.menu1 > li > a');
                            menu1_ul.hide();
                            menu1_a.click(function (e) {
                                e.preventDefault();
                                if (!$(this).hasClass('active')) {
                                    menu1_a.removeClass('active');
                                    menu1_ul.filter(':visible').slideUp('normal');
                                    $(this).addClass('active').next().stop(true, true).slideDown('normal');
                                } else {
                                    $(this).removeClass('active');
                                    $(this).next().stop(true, true).slideUp('normal');
                                }
                            });

                        });
					</script>
					<!-- 侧边栏 -->
					<ul class="box3_list">
						<li><a href="index.jsp">首页</a></li>
						<li><a href="about.html">书库</a></li>
						<li><a href="#">作者专区</a></li>
					</ul>
				</div>


				<!--注册页面 -->
				<div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 center">
					<div class="dreamcrub">
						<ul class="breadcrumbs">
							<li class="home">
								<a href="index.jsp" title="返回首页">首页</a>&nbsp;
								<span>&gt;</span>
							</li>
							<li class="pickup">
								读者注册
							</li>
						</ul>
						<ul class="previous">
							<li><a href="index.jsp">返回首页</a></li>
						</ul>
						<div class="clearfix"></div>
					</div>
					<div class="register">
						<form >
							<div class="register-top-grid">
								<h3>个人信息</h3>
								<div>
									<span>姓名<label>:</label></span>
									<input type="text" id="name">
								</div>
								<div>
									<span>手机号<label>*</label></span>
									<input type="text" id="phone">
								</div>
								<div>
									<span>出生日期<label>*</label></span>
									<input type="text" class="time" id="birth" readonly>
								</div>
								<div>
									<span>个性签名<label>*</label></span>
									<input type="text" id="signature">
								</div>
								<div class="clearfix"></div>
								<p class="news-letter">
									<label class="checkbox"><input type="checkbox" name="checkbox" checked=""><i>
										我已阅读《用户协议》并同意注册</i></label>
								</p>
							</div>
							<div class="register-bottom-grid">
								<h3>登录信息</h3>
								<div>
									<span>用户名<label>*</label></span>
									<input type="text" id="username">
								</div>
								<div>
									<span>密码<label>*</label></span>
									<input type="password" id="password" style="border: 1px solid #DDDBDB;outline-color:#fb4d01;width: 96%;font-size:0.8125em;padding:10px;">
								</div>
								<div>
									<span>确认密码<label>*</label></span>
									<input type="password" id="confirmPassword" style="border: 1px solid #DDDBDB;outline-color:#fb4d01;width: 96%;font-size:0.8125em;padding:10px;">
								</div>
								<div class="checkbox" style="position: relative;top: 5px; left: 10px;">
									<span id="msg" style="color: red"></span>
								</div>
								<div class="clearfix"></div>
							</div>
						</form>
						<div class="clearfix"></div>
						<div class="register-but">
							<form >
								<input type="button" value="创建账户" id="registerBtn" style="background:#ff0d40;color: #FFF;font-size: 0.8em;padding: 0.7em 1.2em;transition: 0.5s all;display: inline-block;text-transform: uppercase;border:none;outline:none;">
								<div class="clearfix"></div>
							</form>
						</div>
					</div>
				</div>
				<div class="clearfix"></div>


			</div>
			<!-- 回到顶部 -->

			<button class="gototop"><span>返回顶部</span></button>
			</div>
			<script src="js/gototop.js"></script>
			<!-- 初始化回到顶部的按钮 -->
			<script type="text/javascript">
                $(function () {
                    $(".gototop").gototop({
                        position: 0, //返回到页面顶部的位置
                        duration: 1250, //返回顶部平滑过渡动画的持续时间
                        visibleAt: 300, //返回顶部按钮在向下滚动多少像素时可见
                    });
                });
			</script>
		</article>
		<footer class="footer">
			<div class="container">
				<img src="images/logo.jpeg" width="100px" height="50px" alt=""/>
				<p><a href="https://www.ecut.edu.cn/">https://www.ecut.edu.cn/</a></p>
				<div class="copy">
					<p>Copyright &copy;2020 East China University of Technology. All Rights Reserved. <br>
						地址：南昌校区：江西省南昌市青山湖区蛟桥镇广兰大道418号；抚州校区：江西省抚州市学府路56号 邮编：330000 <br>
						电话：18317982215 张永康 赣ICP备xxxxxx号 <br></p>
				</div>
				<ul class="social">
					<li><a href="#"> <i class="fb"> </i> </a></li>
					<li><a href="#"> <i class="tw"> </i> </a></li>
				</ul>
			</div>
		</footer>
	</body>

</html>